<template>
    <div class="list">
        <div class="common-header">
            <common-header></common-header>
        </div>
        <div class="main">
            <div class="list-nav">
                <list-nav :list="navList"></list-nav>
            </div>
            <div class="common-list">
                <common-list :datalist="list" :type="2" :pageFlag="true" :totalPage="totalPage" :curPage="curPage" @prev="prev" @next="next" @chosePage="chosePage"></common-list>
            </div>
        </div>
        <div class="common-footer">
            <common-footer></common-footer>
        </div>
    </div>
</template>

<script>
import CommonHeader from '../components/CommonHeader';
import CommonList from '../components/CommonList';
import CommonFooter from '../components/CommonFooter';
import ListNav from '../components/ListNav';
export default {
    data(){
        return {
            list:[],
            totalPage:1600,
            curPage:5,

            navList:[
                {
                    title:"风格",
                    type:1,
                    sub_titles:[
                        {
                            title:'全部',
                            val:0,
                            new_flag:false,
                            active_flag:true
                        },
                        {
                            title:'扁平/简约',
                            val:1,
                            new_flag:false,
                            active_flag:false
                        },
                        {
                            title:'商务/科技',
                            val:2,
                            new_flag:false,
                            active_flag:false
                        },
                        {
                            title:'文艺/清新',
                            val:3,
                            new_flag:false,
                            active_flag:false
                        },
                        {
                            title:'卡通/手绘',
                            val:4,
                            new_flag:false,
                            active_flag:false
                        },
                        {
                            title:'伤感/纹理',
                            val:5,
                            new_flag:false,
                            active_flag:false
                        },
                        {
                            title:'电商/狂欢',
                            val:6,
                            new_flag:false,
                            active_flag:false
                        },
                        {
                            title:'复古中国风',
                            val:7,
                            new_flag:false,
                            active_flag:false
                        }
                    ]
                },
                {
                    title:"版式",
                    type:2,
                    sub_titles:[
                        {
                            title:'全部',
                            val:0,
                            new_flag:false,
                            active_flag:true
                        },
                        {
                            title:'竖图',
                            val:8,
                            new_flag:false,
                            active_flag:false
                        },
                        {
                            title:'横图',
                            val:9,
                            new_flag:false,
                            active_flag:false
                        },
                        {
                            title:'方图',
                            val:10,
                            new_flag:false,
                            active_flag:false
                        }
                    ]
                },
                {
                    title:"风格",
                    type:3,
                    sub_titles:[
                        {
                            title:'全部',
                            val:0,
                            new_flag:false,
                            active_flag:true
                        },
                        {
                            title:'扁平/简约',
                            val:1,
                            new_flag:false,
                            active_flag:false
                        },
                        {
                            title:'商务/科技',
                            val:2,
                            new_flag:false,
                            active_flag:false
                        },
                        {
                            title:'文艺/清新',
                            val:3,
                            new_flag:false,
                            active_flag:false
                        },
                        {
                            title:'卡通/手绘',
                            val:4,
                            new_flag:false,
                            active_flag:false
                        },
                        {
                            title:'伤感/纹理',
                            val:5,
                            new_flag:false,
                            active_flag:false
                        },
                        {
                            title:'电商/狂欢',
                            val:5,
                            new_flag:false,
                            active_flag:false
                        },
                        {
                            title:'复古中国风',
                            val:5,
                            new_flag:false,
                            active_flag:false
                        }
                    ]
                },
                {
                    title:"排序",
                    type:4,
                    sub_titles:[
                        {
                            title:'推荐',
                            val:0,
                            new_flag:false,
                            active_flag:true
                        },
                        {
                            title:'昨日热门',
                            val:1,
                            new_flag:false,
                            active_flag:false
                        },
                        {
                            title:'最新上传',
                            val:2,
                            new_flag:true,
                            active_flag:false
                        },
                        {
                            title:'热门下载',
                            val:3,
                            new_flag:false,
                            active_flag:false
                        },
                        {
                            title:'热门收藏',
                            val:4,
                            new_flag:false,
                            active_flag:false
                        }
                    ]
                },
            ]
        }
    },
    components:{
        CommonHeader,
        CommonList,
        CommonFooter,
        ListNav
    },
    mounted(){
        let tmpList = [];
        for(let i=35;i--;){
            let tmpObj = {
                    id:i,
                    pic:require('../assets/img/source/source.jpg'),
                    title:'2020蓝色商务简约风格季度工作总结汇报盛大范德萨富士达范德萨发达可否尽快交付防盗监控管理发的是客观',
                    downCount:3456,
                    showCount:7890,
                    maskFlag:false
                }
            tmpList.push(tmpObj);
        }
        this.list = tmpList;
    },
    methods:{
        prev(){
            if(this.curPage>1){
                this.curPage -= 1;
            }
        },
        next(){
            if(this.curPage<this.totalPage){
                this.curPage += 1;
            }
        },
        chosePage(page){
            this.curPage = page;
        },
    }
};
</script>

<style lang="less" scoped>
.list{
    width:100%;
    background:@normal-bg-color;  
    .common-header{
        width:100%;
        margin-bottom:10px;
        box-shadow:0 5px 10px 0px rgba(0,0,0,0.01);
    }
    .main{
        width:100%;
        background:@normal-bg-color;
        .list-nav{
            width:@max-width;
            margin:0 auto;
            padding:30px 0;
        }
        .common-list{
            width:@max-width;
            margin:0 auto;
        }
    }
    .common-footer{

    }
}
</style>